<template>
	<view class="detailContainer">
		<view class="content_title">
			<view class="content_title_top">
				<view class="title">{{title}}</view>
				<u-tag :text="state > currentIndex ? '已完成' : projectInfo.isTimeout ? '已超时' : '进行中'" size='small' :type="state > currentIndex ? 'success' : projectInfo.isTimeout ? 'error' : 'primary'"></u-tag>
				<view class="changeButton">
					<u-button :hair-line="false" size="mini" :type="currentShow == 1 ? 'primary' : ''"  @click="changeCurrentShow(1)">
						进度情况
					</u-button>
					<u-button :hair-line="false" size="mini" :type="currentShow == 2 ? 'primary' : ''"  @click="changeCurrentShow(2)">
						变更情况
					</u-button>
				</view>
			</view>
			<view class="time">{{currentShow == 1 ? formList1[0].input0 : formList2[0].createTime}}</view>
		</view>

		<view v-if="currentShow == 1">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:content>
						<view class="u-time-container" v-for="(item,index) in formList1" :key="index">
							<view class="u-time-title">{{'报告时间：' + (item.input0 || '')}}</view>
							<view>{{'计划进度：' + (item.input1 || '')}}</view>
							<view>{{'实际形象进度：' + (item.input2 || '')}}</view>
							<view>{{'本月完成投资金额：' + (item.money0 || '')}}</view>
							<view>{{'完成投资占年度计划投资比例：' + (item.rate0  || 0) * 100 + '%'}}</view>
							<view>{{'完成工程量比例：' + (item.rate1  || 0) * 100 + '%'}}</view>
							<view>{{'按合同应拨款：' + (item.money1 || '')}}</view>
							<view>{{'实际拨付款：' + (item.money2 || '')}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
			<u-form :model="form1" ref="uForm1" label-position="top">
				<u-form-item label="填报进度" :border-bottom="false" :required="true">
						<u-input v-model="form1.input0" type="textarea" :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />					
				</u-form-item>

				<u-form-item label="年度计划进度" :border-bottom="false" :required="true">					
						<u-input v-model="form1.input1" type="textarea" :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />					
				</u-form-item>

				<u-form-item label="实际形象进度" :border-bottom="false" :required="true">
						<u-input v-model="form1.input2" type="textarea" :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>

				<u-form-item label="本月完成投资金额" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form1.money0" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>

				<u-form-item label="完成投资占年度计划投资比例" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form1.rate0" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							%
						</view>
						</view>
				</u-form-item>

				<u-form-item label="完成工程量比例" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form1.rate1" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
									%
						</view>
					</view>
				</u-form-item>

				<u-form-item label="按合同应拨款" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form1.money1" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>

				<u-form-item label="实际拨付款" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form1.money2" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		
		<!-- 项目变更 -->
		<view v-if="currentShow == 2">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:content>
						<view class="u-time-container" v-for="(item,index) in formList2">
							<view class="u-time-title">{{'变更时间：' + item.time0 }}</view>
							<view>{{'变更地点：' + item.input0}}</view>
							<view>{{'变更内容：' + item.input1}}</view>
							<view>{{'变更原因：' + item.input2}}</view>
							<view>{{'变更次数：' + item.number0}}</view>
							<view>{{'本次变更金额：' + item.money0}}</view>
							<view>{{'累计变更金额：' + item.money1}}</view>
							<view>{{'变更审查情况：' + item.input3}}</view>
							<view>{{'工程变更联席会：' + item.input4}}</view>
							<view>{{'区政府常务会：' + item.input5}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
			<u-form :model="form2" ref="uForm2" label-position="top">
				<u-form-item label="变更时间" :border-bottom="false" :required="true">
					<u-picker mode="time" v-model="timeShow2" :params="params" @confirm="ensureTime2"></u-picker>
					<u-button @click="getTime(2)" :hair-line="false" :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form2.time0 ? form2.time0 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>
		
				<u-form-item label="变更地点" :border-bottom="false" :required="true">
						<u-input v-model="form2.input0" type="textarea" :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
		
				<u-form-item label="变更内容" :border-bottom="false" :required="true">
						<u-input v-model="form2.input1" type="textarea" :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
		
				<u-form-item label="变更原因" :border-bottom="false" :required="true">
						<u-input v-model="form2.input2" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
		
				<u-form-item label="变更次数" :border-bottom="false" :required="true">
						<u-input v-model="form2.number0" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
		
				<u-form-item label="本次变更金额" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form2.money0" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>
		
				<u-form-item label="累计变更金额" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form2.money1" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>
		
				<u-form-item label="变更审查情况" :border-bottom="false" :required="true">
						<u-input v-model="form2.input3" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
				<u-form-item label="工程变更联席会" :border-bottom="false" :required="true">
						<u-input v-model="form2.input4" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
				<u-form-item label="区政府常务会" :border-bottom="false" :required="true">
						<u-input v-model="form2.input5" type="text" :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
			</u-form>
		</view>
		
		
		

		<u-button :ripple="true" :hair-line="false" :custom-style="{
					backgroundColor: '#5c77ff',
					color:'#ffffff',
					margin:'20px 0',
					fontSize:'18px',
					padding:'5px 0',
					boxSizing:'content-box',
				}"
				@click="submit">
			提交
		</u-button>
		<u-button :ripple="true" :hair-line="false" type="success" :custom-style="{
					color:'#ffffff',
					margin:'20px 0',
					fontSize:'18px',
					padding:'5px 0',
					boxSizing:'content-box',
				}"
				@click="completeJD">
			该阶段已完成
		</u-button>
		<u-modal v-model="modalShow" title="确认已完成" :show-cancel-button='true' @confirm='ensuerComplete'>
			<view>{{''}}</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default { //项目进度 项目实施阶段组件
		name: "Ssjd_cp",
		props: ['title', 'projectInfo','state', 'currentIndex'],
		data() {
			return {
				formList1:[],
				formList2:[],
				modalShow:false,
				currentShow:1,
				show: true,
				form1: {
					input0:'',
					input1:'',
					input2:'',
					money0:'',
					money1:'',
					money2:'',
					projectId:'',
					rate0:'',
					rate1:'',
				},
				form2:{
					input0:'',
					input1:'',
					input2:'',
					input3:'',
					input4:'',
					input5:'',
					money0:'',
					money1:'',
					number0:'',
					projectId:'',
					time0:'',
				},
				timeShow1: false,
				timeShow2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		mounted(){
			this.getStageInfo()
			this.getChangeInfo()
		},
		methods: {
			getStageInfo(){
				this.$ajax({
					url: `/1/wx/stage/rate/${this.projectInfo.id}`,
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200) {
							this.formList1 = res.data.data
							
						}
					},
					complete: () => {
				
					},
				});
			},
			getChangeInfo(){
				this.$ajax({
					url: `/1/wx/stage/change/${this.projectInfo.id}`,
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200) {
							this.formList2 = res.data.data
							
						}
					},
					complete: () => {
				
					},
				});
			},
			getTime(val) {
				if(val == 1){
					this.timeShow1 = true
				}else if(val == 2){
					this.timeShow2 = true
				}
			},
			ensureTime1(data) {
				this.form1.input0 = data.year + '-' + data.month + '-' + data.day
			},
			ensureTime2(data) {
				this.form2.time0 = data.year + '-' + data.month + '-' + data.day
			},
			changeCurrentShow(val){
				if(val == 1){
					this.currentShow = 1
				}else if(val == 2){
					this.currentShow = 2
				}
			},
			submit(){
				if(this.currentShow == 1){
					this.form1.projectId = this.projectInfo.id
					this.form1.money0 = this.form1.money0
					this.form1.money1 = this.form1.money1 
					this.form1.money2 = this.form1.money2 
					if(this.form1.rate0 < 0 || this.form1.rate0 > 100){						
						this.$refs.uToast.show({
							title: '比列必须在0-100之间',
							type: 'warning',
						})		
						return
					}
					if(this.form1.rate1 < 0 || this.form1.rate1 > 100){
						this.$refs.uToast.show({
							title: '比列必须在0-100之间',
							type: 'warning',
						})	
						return
					}
					this.form1.rate0 = this.form1.rate0 / 100
					this.form1.rate1 = this.form1.rate1 / 100
					this.$ajax({
						url: '/1/wx/stage/rate',
						method: 'POST',
						data: this.form1,
						success: (res) => {
							if (res.data.state == 200) {
								this.$refs.uToast.show({
									title: '提交成功',
									type: 'success',
								})
								this.getStageInfo()
								
							}
						},
						complete: () => {
					
						},
					});
				}else if(this.currentShow == 2){
					this.form2.projectId = this.projectInfo.id
					this.form2.money0 = this.form2.money0 
					this.form2.money1 = this.form2.money1
					this.$ajax({
						url: '/1/wx/stage/change',
						method: 'POST',
						data: this.form2,
						success: (res) => {
							if (res.data.state == 200) {
								this.$refs.uToast.show({
									title: '提交成功',
									type: 'success',
								})
								this.getChangeInfo()
								
							}
						},
						complete: () => {
					
						},
					});
				}
			},
			completeJD(){
				this.modalShow = true
				
			},
			ensuerComplete(){
				this.$ajax({
					url: `/1/wx/stage/complete/${this.projectInfo.id}`,
					method: 'PUT',
					success: (res) => {
						if (res.data.state == 200) {
							
						}
					},
					complete: () => {
						if(this.currentIndex < 5){
							this.$emit('changeCurrentIndex', ++this.currentIndex)
						}
					},
				});
			}
		},
		created() {

		},
	}
</script>

<style lang="scss" scoped>
	.detailContainer {
		background-color: #fff;
		width: 100%;
		padding: 0 15px;
	}

	.content_title {
		position: relative;
		margin-bottom: 10px;

		.content_title_top {
			display: flex;
			align-items: center;

			.title {
				font-size: 18px;
				margin-right: 10px;
				font-weight: bold;
			}
		}

		.time {
			color: #BFC0C2;
			margin-top: 4px;
		}
	}

	.changeButton {
		position: absolute;
		right: 1%;

		/deep/>u-button:nth-of-type(1) {
			margin-right: 10px
		}
	}

	.u-time-container {
		background: linear-gradient(45deg, #e1f2fb, transparent);
		padding: 15px;
		>view {
			margin-bottom: 10px;
		}
	}

	.u-time-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	.content_bottom_row {
		@include flex_layout_row;
		justify-content: flex-start;
		align-items: center;
	}
</style>
